<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>张超杰</title>
  <meta name="viewport" content="width=device-width，initial-scale=1.0" />
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1199435_ybii42a4kdn.css" />
  <!-- Place this tag in your head or just before your close body tag. -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <link rel="stylesheet" href="./static/style.css" />
</head>

<body>
  <main class="wrapper">
    <section class="profile">
      <div class="profile-container">
        <img class="profile-avatar" src="./static/avatar.png" alt="张超杰" />
        <h1 class="profile-name">张超杰</h1>
        <div class="profile-motto">
          因为喜爱, 所以坚持
        </div>
        <ul class="profile-links">
          <li><a href="https://github.com/dream2023">Github</a></li>
          <li>
            <a href="https://juejin.im/user/5c1b0510f265da6150646b9a">掘进</a>
          </li>
          <li><a href="tencent://message/?uin=1098626505">QQ</a></li>
        </ul>
      </div>
    </section>
    <section class="project">
      <h2 class="project-title">😊 开源项目列表 👇</h2>
      <ul class="project-list">
        <li class="project-item">
          <h3 class="project-name">
            vue-ele-form
          </h3>
          <p class="project-desc">
            基于 element-ui 的数据驱动表单组件(最得意之作)
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://www.yuque.com/chaojie-vjiel/vbwzgu">Doc</a>
            </li>
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/KjGKYW">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-form">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">
            vue-ele-editable
          </h3>
          <p class="project-desc">
            高效、简单、强大的 element-ui 行内编辑组件
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/dBNNbP">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-editable">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-table</h3>
          <p class="project-desc">
            基于 element-ui 的表格二次封装, 实现了一行代码解决
            <b>搜索、排序、筛选、过滤、分页、显示隐藏列、行内编辑</b> 功能
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/agwMpY">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-table">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-import</h3>
          <p class="project-desc">
            超简单、好用的 element-ui Excel 导入组件
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/NVBKRy">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-import">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-gallery</h3>
          <p class="project-desc">
            利用 element ui 组件库构成的画廊组件，支持图片、视频、iframe
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/vwZrgG/">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-gallery">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">easy-go-top</h3>
          <p class="project-desc">简单 & 强大的 vue 回到顶部组件</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/oRLqoj">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/easy-go-top">Github</a>
            </li>
            <li class="profile-link-item">
              <a href="https://dream2023.github.io/easy-go-top/">Documentation</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">easy-affix</h3>
          <p class="project-desc">
            Vue图钉组件，
            可以将内容固定在屏幕上，并且不随页面的滚动而滚动，常用于侧边菜单和导航栏等
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://codepen.io/dream2023/pen/vwZrgG">Demo</a>
            </li>
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-gallery">Github</a>
            </li>
            <li class="profile-link-item">
              <a href="https://dream2023.github.io/vue-ele-gallery/">Documentation</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-auto-text</h3>
          <p class="project-desc">给定宽度，文字大小自适应组件</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-auto-text">Github</a>
            </li>
            <li class="profile-link-item">
              <a href="https://dream2023.github.io/vue-auto-text/">Documentation</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">all-trim</h3>
          <p class="project-desc">
            极少代码实现去除字符串、数组、嵌套数组、对象空白字符
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/all-trim">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-upload-video</h3>
          <p class="project-desc">
            对 element-ui 中 upload 组件进一步封装，使得视频上传更加容易
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-upload-video">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-upload-image</h3>
          <p class="project-desc">
            对 element-ui 中 upload 组件进一步封装，使得图片上传更加容易
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-upload-image">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-ele-image</h3>
          <p class="project-desc">
            对 element-ui 中 image 组件进一步封装，使 image 组件更强大、好用
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-ele-image">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-hover-mask</h3>
          <p class="project-desc">
            vue 遮罩组件
          </p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-hover-mask">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">easy-github-pages</h3>
          <p class="project-desc">一分钟搭建 GitHub Pages 的Vue组件</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/easy-github-pages">Github</a>
            </li>
            <li class="profile-link-item">
              <a href="https://dream2023.github.io/easy-github-pages/">Documentation</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">vue-image-pro</h3>
          <p class="project-desc">一个vue图片增强组件</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/vue-image-pro">Github</a>
            </li>
            <li class="profile-link-item">
              <a href="https://dream2023.github.io/vue-image-pro/">Documentation</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">wx2tt</h3>
          <p class="project-desc">微信小程序一键转头条小程序工具</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/wx2tt">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">ThinkPHP5-alipay</h3>
          <p class="project-desc">超简单的 ThinPHP5 支付宝扩展库</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/ThinkPHP5-alipay">Github</a>
            </li>
          </ul>
        </li>
        <li class="project-item">
          <h3 class="project-name">ThinkPHP5-wxpay</h3>
          <p class="project-desc">超简单的 ThinPHP5 微信扩展库</p>
          <ul class="project-links">
            <li class="profile-link-item">
              <a href="https://github.com/dream2023/ThinkPHP5-wxpay">Github</a>
            </li>
          </ul>
        </li>
      </ul>
    </section>
  </main>
</body>

</html>